<template>
  <div class="goodsitem" @click="itemclick">
    <img :src="showImage" alt="" @load="imageLoad">
    <div class="goodsinfo">
      <p>{{goodsitem.title}}</p>
      <span class="price">价格:{{goodsitem.price}}</span>
      <span class="collect">收藏:{{goodsitem.cfav}}</span>
    </div>
  </div>
</template>

<script>
  export default{
    props:{
      goodsitem:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    computed:{
      showImage(){
        return this.goodsitem.img || this.goodsitem.image || this.goodsitem.show.img
        // if(this.goodsitem.image){return this.goodsitem.image}
        // else if(this.goodsitem.show.img){ return this.goodsitem.show.img}
        //      else  return this.goodsitem.img

      }

    },
    methods:{
      imageLoad(){
        this.$bus.$emit('imgLoad')
      },
      itemclick(){
        if(this.goodsitem.iid){
           this.$router.push('/detail/' + this.goodsitem.iid).catch(err=>{})
        }else{
          this.$router.push('/detail/' + this.goodsitem.shop_id).catch(err=>{})
        }
      }
    }
  }
</script>

<style scoped="scoped">
  .goodsitem{
    padding-bottom: 40px;
    position: relative;
    width: 48%;
  }
  .goodsitem img{
    width: 100%;
    border-radius: 5px;
    margin-bottom: 5px;
  }
  .goodsinfo{
    font-size: 12px;
    bottom: 5px;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
}
.goodsinfo p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.goodsinfo .price{
  color: #ff5777;
  margin-right: 10px;
}
.goodsinfo .collect{
  position: relative;
}
.goodsinfo.collect::before{
  content: "";
  position: absolute;
  left: -10px;
  top: -1px;
  width: 14px;
  height: 14px;
  /* background: url("../../../../assets/img/home/collect.png"); */
  /* background: url(../../../../assets/img/home/收%20藏.png); */
}
</style>
